<template>
  <div class="_wz_certificateCriterionForm">
    <Form ref="driverInfoForm" :model="formData" label-position="right" :label-width="96" :rules="ruleValidate">
      <row :gutter="16">
        <i-col span="8">
          <FormItem label="证书状态" prop="certificateState" key="certificateState">
            <i-select v-model.number="formData.certificateState" filterable placeholder="请选择证书状态" clearable>
              <Option :value="1">已生效</Option>
              <Option :value="2">已逾期</Option>
              <Option :value="3">办理中</Option>
            </i-select>
          </FormItem>
        </i-col>
        <i-col span="8" v-if="formData.certificateState != 3">
          <FormItem label="证书编号" prop="certificateNo" key="certificateNo">
            <i-input v-model="formData.certificateNo" placeholder="证书编号" clearable />
          </FormItem>
        </i-col>
        <i-col span="8"  v-if="formData.certificateState != 3">
          <FormItem label="达标等级" prop="certificateLevel" key="certificateLevel">
            <i-select v-model="formData.certificateLevel" filterable placeholder="达标等级" clearable>
              <Option value="1">一级</Option>
              <Option value="2">二级</Option>
              <Option value="3">三级</Option>
            </i-select>
          </FormItem>
        </i-col>
        <i-col span="8">
          <FormItem label="运输企业" prop="deptUuid" key="deptUuid">
            <i-select v-model="formData.deptUuid" filterable placeholder="运输企业" clearable>
              <Option v-for="item in subDeptList" :value="item.uuid" :key="item.uuid">{{ item.deptName }}</Option>
            </i-select>
          </FormItem>
        </i-col>
        <i-col span="8">
          <FormItem label="评定机构" prop="certificateIssueName" key="certificateIssueName">
            <i-input v-model="formData.certificateIssueName" placeholder="评定机构" clearable />
          </FormItem>
        </i-col>
        <i-col span="8">
          <FormItem label="经营类型" prop="certificateMold" key="certificateMold">
            <i-input v-model="formData.certificateMold" placeholder="经营类型" clearable />
          </FormItem>
        </i-col>
        <i-col span="8">
          <FormItem label="证书类别" prop="certificateType" key="certificateType">
            <i-input v-model="formData.certificateType" placeholder="证书类别" clearable />
          </FormItem>
        </i-col>
        <i-col span="8" v-if="formData.certificateState != 3">
          <FormItem label="发证日期" prop="certificateReleaseDate" key="certificateReleaseDate">
            <DatePicker type="date" split-panels v-model="formData.certificateReleaseDate" placeholder="请选择发证日期"></DatePicker>
          </FormItem>
        </i-col>
        <i-col span="8" v-if="formData.certificateState != 3">
          <FormItem label="截至日期" prop="certificateDueDate" key="certificateDueDate">
            <DatePicker type="date" split-panels v-model="formData.certificateDueDate" placeholder="请选择截至日期"></DatePicker>
          </FormItem>
        </i-col>
      </row>
      <FormItem label="合同图片" v-if="formData.certificateState == 3">
        <Upload :before-upload="contractImgFileFun" action="">
          <Button type="primary" icon="ios-cloud-upload-outline">上传合同图片</Button>
        </Upload>
        <div class="demo-upload-list" style="width: 400px;height:200px">
          <viewer style="width: 400px;height:200px;">
            <img style="width:100% ;height: 100%;" :src="!!contractImgFile.url?contractImgFile.url:'../../static/img/zwtpxd.png'">
          </viewer>
        </div>
      </FormItem>
      <FormItem label="资质证书" v-else>
        <Upload :before-upload="uniformSocialCreditImgFileFun" action="">
          <Button type="primary" icon="ios-cloud-upload-outline">上传证书照片</Button>
        </Upload>
        <div class="demo-upload-list" style="width: 400px;height:200px">
          <viewer style="width: 400px;height:200px;">
            <img style="width:100% ;height: 100%;"
                 :src="!!uniformSocialCreditImgFile.url?uniformSocialCreditImgFile.url:'../../static/img/zwtpxd.png'">
          </viewer>
        </div>
      </FormItem>




      <div class="demo-drawer-footer">
        <Button style="margin-right: 8px" @click="$emit('closeFun', false)">取消</Button>
        <Button type="primary" @click="addSubmit('driverInfoForm')">提交</Button>
      </div>
    </Form>
    <Spin size="large" fix v-if="spinShow"></Spin>

  </div>
</template>
<script>
export default {
  props: ["selectData"],
  data() {
    return {
      uploadProgress: 0,//文件上传进度
      item: {},
      spinShow: false,//本页加载
      //下级企业列表
      subDeptList: [],
      //从业类型
      personType: [],
      //从业人员头像
      uniformSocialCreditImgFile: {
        data: null,
        url: ''
      },
      contractImgFile: {
        data: null,
        url: ''
      },
      formData: {},
      ruleValidate: {
        certificateType: [
          {required: true, message: '请填写证书类别', trigger: 'blur'}
        ],
        certificateState:[
          {type: 'number', required: true, message: '请选择证书状态', trigger: 'blur'}
        ],
        // certificateMold: [
        //   {required: true, message: '请填写经营类型', trigger: 'blur'}
        // ],
        certificateNo: [
          {required: true, message: '请填写证书编号', trigger: 'blur'}
        ],
        certificateLevel: [
          {required: true, message: '请填写证书等级', trigger: 'blur'}
        ],
        certificateIssueName: [
          {required: true, message: '请填写颁发机构', trigger: 'blur'}
        ],
        deptUuid: [
          {required: true, message: '请选择运输企业', trigger: 'blur'}
        ],
        certificateReleaseDate: [
          {type:'date',required: true, message: '请选择发证日期', trigger: 'blur'}
        ],
        certificateDueDate: [
          {type:'date',required: true, message: '请选择截至日期', trigger: 'blur'}
        ],
      }
    }
  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    let that = this;
    // 0 是 添加 1是修改
    if (!!that.selectData.id) {
      that.formData = JSON.parse(JSON.stringify(that.selectData));
      that.uniformSocialCreditImgFile.url = !!that.selectData.certificateImg ? that.apiUrl.imgUrl + that.selectData.certificateImg : '';
      that.contractImgFile.url = !!that.selectData.contractImg ? that.apiUrl.imgUrl + that.selectData.contractImg : '';
    }
    //运输企业
    that.axios.post(that.apiUrl.coreDeptCoreDeptList, {}).then(res => {
      if (!!res) {
        that.subDeptList = res.data.data;
        if (!that.selectData.id) {
          that.formData.deptUuid = that.subDeptList[0].uuid;
        }
      }
    }).catch(err => {
      console.log("失败", err)
    })

  },
  methods: {//执行的方法
    /*证书照片上传*/
    uniformSocialCreditImgFileFun(file) {//营业执照图片
      var that = this;
      var type = file.type.split("/")[0];
      if (type == "image") {//图片
        that.uniformSocialCreditImgFile.url = window.URL.createObjectURL(file);
        that.uniformSocialCreditImgFile.data = file;
      } else {
        that.$Message.error('请选择jpg、png、jpeg的图片进行上传');
      }
      return false;
    },
    /*证书照片上传*/
    contractImgFileFun(file) {//营业执照图片
      var that = this;
      var type = file.type.split("/")[0];
      if (type == "image") {//图片
        that.contractImgFile.url = window.URL.createObjectURL(file);
        that.contractImgFile.data = file;
      } else {
        that.$Message.error('请选择jpg、png、jpeg的图片进行上传');
      }
      return false;
    },
    //提交表单
    addSubmit(data) {
      let that = this;
      that.$refs[data].validate((valid) => {
        if (valid) {//正则判断使上传
          let data = JSON.parse(JSON.stringify(that.formData));
          let formData = new FormData();
          data.certificateReleaseDate = !!data.certificateReleaseDate?that.public.timeFormatting(data.certificateReleaseDate, "yyyy-MM-dd"):'';
          data.certificateDueDate = !!data.certificateDueDate?that.public.timeFormatting(data.certificateDueDate, "yyyy-MM-dd"):'';
          //营业执照图片
          if (!!that.uniformSocialCreditImgFile.data) {//选择了图片
            formData.append('certificateImgFile', that.uniformSocialCreditImgFile.data);
          }

          //营业执照图片
          if (!!that.contractImgFile.data) {//选择了图片
            formData.append('contractImgFile', that.contractImgFile.data);
          }


          for (let key in data) {
            if (!!data[key]) {
              // if (key == 'certificateReleaseDate' || key == 'certificateDueDate') {
              //   data[key] = that.public.timeFormatting(data[key], "yyyy-MM-dd");
              // }
              formData.append(key, data[key]);
            }
          }

          that.axios.post(that.apiUrl.webApi + "/safety/certificate/certificateCriterionSaveOrUpdate", formData, that.public.parameterUploadProgress(that)).then(res => {
            that.$Spin.hide();
            if (!!res) {
              that.$Message.success("保存成功");
              that.$emit("closeFun", true)
            }
          }).catch(err => {
            console.log('失败', err);
          })
        } else {
          that.$Message.error('请正确填写表单');
        }
      })
    },
  },
  watch: {//监听

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>
<style lang="less">
._wz_certificateCriterionForm {
  .demo-upload-list {
    margin: auto;
    display: inline-block;
    width: 100px;
    height: 120px;
    text-align: center;
    line-height: 140px;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    border: 1px solid rgba(0, 0, 0, .2);

    img {
      min-width: 20%;
      max-width: 95%;
      min-height: 20%;
      max-height: 95%;
      display: block;
      margin: auto;
    }
  }


}
</style>
